﻿<!DOCTYPE html>
<html>
<head>
    <title>一些测试效果</title>
    <!--<link href="AutoComplete.css" type="text/css" rel="Stylesheet" />-->
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <style>
        .autoCompleteWrap {
            position: relative;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            padding-left: 0;
            padding-right: 0;
        }

            .autoCompleteWrap:before, .autoCompleteWrap:after {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-left: 0;
                padding-right: 0;
            }

        .autoComplete {
            position: absolute;
            z-index: 999;
            /*border: 1px solid #ffd800;*/
            background: #FFF none repeat scroll 0% 0%;
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
            overflow-x: hidden;
            overflow-y: auto;
            line-height: 32px;
            font-size: 12px;
            height: auto;
            /*width: 200px;*/
        }

            .autoComplete li {
                /*text-indent: 10px;*/
                cursor: pointer;
                height: 32px;
            }

                .autoComplete li:hover {
                    background-color: yellow;
                }

                .autoComplete li.emphasis {
                    background-color: #b6ff00;
                }

        body {
            margin: 0;
        }

        .test {
            /*margin:500px;*/
            border: 1px solid #808080;
            position: relative;
        }

            .test div {
                width: 200px;
                height: 200px;
            }

            .test .doc1 {
                background-color: #ff0000;
                position: relative;
                top: 20px;
                left: 800px;
                z-index: 100;
                height: 400px;
                width: 400px;
            }

        .doc2 {
            background-color: #ff6a00;
            position: absolute;
            left: 300px;
            bottom: 300px;
            /*z-index: 301;*/
        }

        .doc3 {
            background-color: #ffd800;
        }

        .doc4 {
            background-color: #b6ff00;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class='doc1'>
            <select style="height:200px;">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </div>
        <div class='doc2'>B</div>
        <div class='doc3'>C</div>
        <div class='doc4'>D</div>

    </div>

    <form class="form-inline" role="form">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control AutoComplete" id="firstname" placeholder="请输入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
                <input type="text" class="form-control AutoComplete" id="lastname" placeholder="请输入姓">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 请记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>

    <form id="form1">
        <div style="margin:50px;">
            <input id="AutoComplete" name="AutoComplete" type="text" value="" placeholder="请输入关键字" />

            <div class='autoCompleteWrap'>
                <div class='autoComplete'>
                    <ul>
                        <li><span>st天化</span></li>
                        <li><span>申通快递单号查询</span></li>
                        <li><span>steam</span></li>
                        <li><span>sttc.sh.tobacco.com.cn</span></li>
                        <li><span>s5解说tt</span></li>
                        <li><span>struts2</span></li>
                        <li><span>汕头天气</span></li>
                        <li><span>三体txt下载</span></li>
                        <li><span>殊途同归</span></li>
                        <li><span>steer</span></li>
                    </ul>
                </div>
            </div>


            <style>
                .engine-hint-list {
                    position: absolute;
                    top: 40px;
                    left: 0px;
                    width: 100%;
                    /*overflow: hidden;*/
                    background: #FFF none repeat scroll 0% 0%;
                    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
                    line-height: 27px;
                    font-size: 12px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    height: auto;
                    max-height: 250px;
                    width: 500px;
                }

                ul, li {
                    list-style-type: none;
                    padding-left: 0px;
                    margin: 0px;
                }

                .engine-hint-list li {
                    text-indent: 10px;
                    cursor: pointer;
                }

                    .engine-hint-list li:hover {
                        background-color: yellow;
                    }
            </style>
            <div style="position:relative;">
                <div class="engine-hint-list" id="engine-tip-show">
                    <ul>
                        <li><span>st天化</span></li>
                        <li><span>申通快递单号查询</span></li>
                        <li><span>steam</span></li>
                        <li><span>sttc.sh.tobacco.com.cn</span></li>
                        <li><span>s5解说tt</span></li>
                        <li><span>struts2</span></li>
                        <li><span>汕头天气</span></li>
                        <!--<li><span>三体txt下载</span></li>
                        <li><span>殊途同归</span></li>
                        <li><span>steer</span></li>-->
                    </ul>
                </div>
            </div>

            <!--<br />
            <input id="Text1" type="text" style=" display:none;" />-->
            <div>
                append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容的位置和选择器。
                <br />
                Stringbuffer 有append()方法 Stringbuffer其实是动态字符串数组 append()是往动态字符串数组添加，跟“xxxx”+“yyyy”相当那个‘+’号 跟String不同的是...
                <br />
                Stringbuffer 有append()方法 Stringbuffer其实是动态字符串数组 append()是往动态字符串数组添加，跟“xxxx”+“yyyy”相当那个‘+’号 跟String不同的是...
                <br />
                Stringbuffer 有append()方法 Stringbuffer其实是动态字符串数组 append()是往动态字符串数组添加，跟“xxxx”+“yyyy”相当那个‘+’号 跟String不同的是...
                <br />
                Stringbuffer 有append()方法 Stringbuffer其实是动态字符串数组 append()是往动态字符串数组添加，跟“xxxx”+“yyyy”相当那个‘+’号 跟String不同的是...
            </div>

        </div>
    </form>
    <script src="Scripts/jquery-1.11.3.min.js"></script>

    <!--网上找的一个类似的插件-->
    <!--<script src="jquery.AutoComplete.js" type="text/javascript"></script>-->
    <script src="Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.AutoComplete').AutoComplete({ url: "test.ashx", minChar: 1, datafn: getData, fn: alertMsg });
        });
        function alertMsg(vl) {
            //alert('你将要搜索的关键字是： ' + vl);
        }
        /*加载数据*/
        function getData(val) {
            //var arrData = new Array();
            //if (val != "") {
            //    $.ajax({
            //        type: "post",
            //        async: false, //控制同步
            //        url: "getData.ashx",
            //        data: "param=" + val,
            //        dataType: "json",
            //        cache: false,
            //        success: function (data) {
            //            for (var i = 0; i < data.length; i++) {
            //                if (val == data[i].Code.substring(0, val.length))
            //                    arrData.push(data[i].Code);
            //            }
            //        },
            //        Error: function (err) {
            //            alert(err);
            //        }
            //    });
            //}
            //return arrData;
        }

        (function ($) {
            var itemIndex = 0;
            var timeoutId;
            var url = "#";
            var $this;

            var wrap = "<div class='autoCompleteWrap'><div class='autoComplete'><ul><li></li></ul></div></div>";
            var item = "<li><span>ssssssssssss</apan></li>";

            $.fn.AutoComplete = function (options) {
                //以下为该插件的属性及其默认值
                var defaults = {
                    width: 0,     //设置提示框的宽度  0表示自动（与当前作用的文本框同宽）
                    size: 5,   //提示列表中可见选项的数目
                    autoStyle: true,      //使选项高度与当前作用的文本框高度相同，true时将覆盖css设置，false时使用css样式
                    minChar: 1, //最小字符数(从第几个开始搜索)
                    millisec: 100, //在执行搜索前需等待的毫秒数
                    url: "#",
                    datafn: null, //加载数据函数
                    fn: null //选择项后触发的回调函数
                };

                var settings = $.extend({}, defaults, options);//$.extend(defaults, options);

                $this = this;

                settings.textWidth = this.innerWidth();
                settings.textHeight = this.innerHeight();
                settings.textPL = this.css("padding-left");
                settings.textPR = this.css("padding-right");
               
                var _createLayer = function () {
                    $this.after(wrap);
                }
                var _ddd = function (item) {
                    var container = $(".autoComplete"), scrollTo = item;

                    var temp = scrollTo.offset().top - (container.offset().top + container.outerHeight(true));
                    if (temp >= 0) {
                        container.scrollTop(
                            temp + +container.scrollTop()/**/
                        );
                    }
                    //console.log(scrollTo.offset().top);
                    //console.log(container.offset().top);
                    //console.log(container.scrollTop());
                    //container.scrollTop(
                    //    scrollTo.offset().top - container.offset().top + container.scrollTop()/**/
                    //);

                    // Or you can animate the scrolling:
                    //container.animate({
                    //    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
                    //},500);
                }

                var _getDate = function () {
                    $.post(settings.url, { key: settings.keywords }, function (data) {
                        _enptyLayer();
                        $.each(data, function (i, n) {
                            $(".autoComplete ul").append(item);
                            //console.log(i);
                        });
                        var itemNum = $(".autoComplete ul").children().length;
                        _setStyle(itemNum);
                        _showLayer();

                    }, "json")
                };


                var _enptyLayer = function () {
                    if (arguments.length == 0) {
                         $(".autoComplete ul").empty();
                    } else {
                        arguments[0].next(".autoCompleteWrap").find(".autoComplete ul").remove();
                    }
                }
                //var _removeLayer = function () {
                //    if (arguments.length == 0) {
                //        $(".autoCompleteWrap").remove();
                //    } else {
                //        arguments[0].next(".autoCompleteWrap").remove();
                //    }
                //}
                var _hideLayer = function () {
                    if (arguments.length == 0) {
                        $(".autoCompleteWrap").hide();
                    } else {
                        arguments[0].next(".autoCompleteWrap").hide();
                    }
                }
                var _showLayer = function () {
                    $(".autoCompleteWrap").show();
                    if (arguments.length == 0) {
                        $(".autoCompleteWrap").show();
                    } else {
                        arguments[0].next(".autoCompleteWrap").show();
                    }
                }

                var _setStyle = function (itemNum) {
                    $(".autoComplete").css({
                        "width": settings.width,
                        "height": itemNum < settings.size ? settings.itemHeight * itemNum : settings.maxHeight,
                        "max-height": settings.maxHeight
                    });
                    if (settings.autoStyle) {
                        $(".autoComplete li").css({
                            "height": settings.itemHeight,
                            "line-height": settings.itemHeight + "px",
                            "padding-left": settings.textPL,
                            "padding_right": settings.textPR
                        });
                    }
                }
                var _setItemHeightByCss = function (d) {
                    return d.next(".autoCompleteWrap").find(".autoComplete ul").outerHeight(true);
                }

                _createLayer();
                _hideLayer();

                settings.width = settings.width ==  0 ? settings.textWidth  : settings.width;
                settings.itemHeight = settings.autoStyle ? settings.textHeight : _setItemHeightByCss();
                settings.maxHeight = settings.itemHeight * settings.size;
                settings.height = 0;  //高度取决于具体数据长度


                this.on('keyup', function (event) {

                    //$this = $(this);

                    var myEvent = event || windows.event;
                    var keyCode = (myEvent.keyCode) || (myEvent.which) || (myEvent.charCode);

                    /*输入是字母，或数字 者退格键则需要重新请求*/
                    if ((keyCode >= 65 && keyCode <= 90)
                        || keyCode >= 48 && keyCode <= 57
                        || keyCode >= 96 && keyCode <= 105
                        || keyCode == 32
                        || keyCode == 8) {

                        settings.keywords = $(this).val().trim();

                        //console.log(settings.keywords);
                        if (settings.keywords.length >= settings.minChar) {
                            clearTimeout(timeoutId);
                            timeoutId = setTimeout(_getDate, settings.millisec);
                        }

                    } else if (keyCode == 38 || keyCode == 40) {//处理上下键(up,down)
                        var itemNum = $(".autoComplete ul").children().length;
                        var itemNum2 = itemNum + 1;

                        //if (itemIndex == 0) {

                        //} else {
                        //    $(".autoComplete ul").children().eq(itemIndex - 1).removeClass("emphasis");
                        //}

                        $(".autoComplete ul").children().removeClass("emphasis");

                        itemIndex = (keyCode == 38 ? itemNum2 - 1 : itemNum2 + 1) + itemIndex;
                        itemIndex = itemIndex % itemNum2;

                        if (itemIndex != 0) {
                            $(".autoComplete ul").children().eq(itemIndex - 1).addClass("emphasis");
                            _ddd($(".autoComplete ul").children().eq(itemIndex - 1));
                        }

                        console.log(itemIndex);

                        //var words = $('#ajaxClue').children();
                        //var num = words.length;
                        //$('#ajaxClue').children().eq(emphasisIndex).removeClass("emphasis");
                        //emphasisIndex = (keyCode == 38 ? num - 1 : num + 1) + emphasisIndex;
                        //emphasisIndex = emphasisIndex % num;

                        //words.eq(emphasisIndex).addClass("emphasis");
                        //$('#ajaxClue').val(words.eq(emphasisIndex).html());

                        //txt = words.eq(emphasisIndex).attr("id");
                        //var s = words.eq(emphasisIndex).attr("title");
                        //$("#keyword").val(s);
                    }
                    else if (keyCode == 13) {//按下了回车键
                        //    processEnter();
                    }
                });

                return this;
            };
        })(jQuery);
    </script>
</body>
</html> 